<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :width="device!=='mobile'?'700px':'98%'" center class="sign-dialog">
      <span slot="title">手写签名</span>
      <div class="solid">
        <vueEsign ref="esign" :height="device!=='mobile'?250:400" isCrop :lineWidth="device!=='mobile'?5:6"/>
      </div>
      <span slot="footer">
				<el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
				<el-button size="mini" type="warning" @click="reset">清 空</el-button>
				<el-button size="mini" type="primary" @click="confirm">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import vueEsign from 'vue-esign'
import common from '@/utils/common.js'
import {
  cloneDeep
} from 'lodash'

export default {
  name: 'SignDialog',
  // beforeRouteLeave(to, from, next) {
  //   this.$destroy()
  //   next()
  // },
  beforeDestroy() {
  },
  components: {
    vueEsign
  },
  props: {},
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['device'])
  },
  mounted() {
  },
  methods: {
    show() {
      const that = this
      that.dialogVisible = true
      this.$nextTick(() => {
        this.reset()
      })
    },
    reset() {
      const that = this
      that.$refs.esign.reset()
    },
    confirm() {
      const that = this
      that.$refs.esign.generate().then(res => {
        that.$emit('confirm-sign', res)
        that.dialogVisible = false
      }).catch(err => {
        common.messageError('请签名！')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .sign-dialog {
  .el-dialog__body {
    padding: 10px 5px;
  }
}
</style>
